<template>
	<view class="box-group-tree1">
		<view class="_left">
			<view
				:class="currentGid == item.gid?'_for _hover':'_for'"
				v-for="item in groupList"
				@click="clickGroupListButton(item.gid)">
				{{item.name}}
			</view>
		</view>
		<view class="_right">
			<template v-if="groupSubListStatus === 'success'">
				<view
					class="_for"
					v-for="item in groupSubList"
					@click="$_to('group/detail?gid=' + item.gid)">
					<view class="_for-box">
						<view class="_cover" v-if="item.cover">
							<image :src="item.cover" mode="widthFix"></image>
						</view>
						<view class="_cover-right">
							<view class="_cover-right-top">
								<text class="_name">{{item.name}}</text>
							</view>
							<view class="_cover-right-bottom">
								<text>{{item.postCount}}帖子</text>
								<text>{{item.commentCount}}回复</text>
							</view>
						</view>
					</view>
					<view
						class="_description"
						v-if="item.description">{{item.description}}</view>
				</view>
			</template>
			<template v-if="groupSubListStatus === 'loading'">
				<view style="padding-top: 25rpx;">
					<global-loading></global-loading>
				</view>
			</template>
			<template v-if="groupSubListStatus === 'empty'">
				<global-empty></global-empty>
			</template>
			
		</view>
	</view>
</template>

<script>
	export default {
		name:"box-group-tree1",
		data() {
			return {
				groupList:[],
				groupSubList:[],
				groupSubListStatus:"loading",
				currentGid:""
			};
		},
		mounted(){
			this.getGroup_1();
		},
		methods:{
			getGroup_1(){
				this.$_request(
					"GET","/api/fresns/v1/group/list",
					{
						"topGroups":1,
						"filterType":"whitelist",
						"filterKeys":"name,gid"
					},
					(res) => {
						this.groupList = res.data.data.list;
						this.currentGid = this.groupList[0].gid;
						this.getGroupSub();
					}
				)
			},
			getGroupSub(){
				this.$_request(
					"GET","/api/fresns/v1/group/list",
					{
						"gid":this.currentGid,
						"filterType":"whitelist",
						"filterKeys":"gid,cover,name,postCount,commentCount,description"
					},
					(res) => {
						if(res.data.data.list.length){
							this.groupSubList = res.data.data.list;
							this.groupSubListStatus = "success";
						}else{
							this.groupSubListStatus = "empty";
						}
					}
				)
			},
			clickGroupListButton(gid){
				this.currentGid = gid;
				this.groupSubListStatus = "loading";
				this.getGroupSub();
			}
		}
	}
</script>

<style lang="scss" scoped>
.box-group-tree1{
	margin: 25rpx 0;
	display: flex;
	._left{
		flex-shrink: 0;
		background: #FFF;
		._for{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 28rpx;
			padding: 25rpx;
			color: $placeholder;
		}
		._hover{
			color: $primary;
			font-weight: bold;
		}
	}
	._right{
		flex: 1;
		background: #FFF;
		margin: 0 25rpx;
		._for{
			padding: 25rpx 0;
			border-bottom: 1px solid $border;
			margin: 0 25rpx;
			._for-box{
				display: flex;
				._cover{
					width: 90rpx;
					height: 90rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
				}
				._cover-right{
					display: flex;
					justify-content: center;
					flex-flow: column;
					._cover-right-top{
						line-height: 28rpx;
						._name{
							font-size: 28rpx;
						}
					}
					._cover-right-bottom{
						line-height: 22rpx;
						padding-top: 15rpx;
						text{
							font-size: 22rpx;
							color: $placeholder;
							padding-right: 15rpx;
						}
					}
				}
			}
			._description{
				margin-top: 25rpx;
				font-size: 22rpx;
				background: $background;
				line-height: 35rpx;
				padding: 15rpx 20rpx;
				border-radius: 10rpx;
				color: $placeholder;
			}
		}
		._for:last-child{
			border-bottom: 0;
		}
	}
}
</style>